<template>
  <div class="dev-alter">
    <bf-alter>alter</bf-alter>
    <bf-alter type="success">success</bf-alter>
    <bf-alter type="error">error</bf-alter>
    <bf-alter type="warning">warning</bf-alter>
    <p>含描述信息</p>
    <bf-alter>
      alter
      <div slot="description">提示内容。提示内容。提示内容。提示内容</div>
    </bf-alter>
    <bf-alter type="success">
      success
      <div slot="description">提示内容。提示内容。提示内容。提示内容</div>
    </bf-alter>
    <bf-alter type="error">
      error
      <div slot="description">提示内容。提示内容。提示内容。提示内容</div>
    </bf-alter>
    <bf-alter type="warning">
      warning
      <div slot="description">提示内容。提示内容。提示内容。提示内容</div>
    </bf-alter>
    <p>带icon</p>
    <bf-alter type="info" show-icon>信息提示</bf-alter>
    <bf-alter type="success" show-icon>信息提示</bf-alter>
    <bf-alter type="error" show-icon>信息提示</bf-alter>
    <bf-alter type="warning" show-icon>信息提示</bf-alter>
    <bf-alter type="info" show-icon>
      信息提示
      <div slot="description">提示内容。提示内容。提示内容。提示内容</div>
    </bf-alter>
    <bf-alter type="success" show-icon>
      信息提示
      <div slot="description">提示内容。提示内容。提示内容。提示内容</div>
    </bf-alter>
    <bf-alter type="error" show-icon>
      信息提示
      <div slot="description">提示内容。提示内容。提示内容。提示内容</div>
    </bf-alter>
    <bf-alter type="warning" show-icon>
      信息提示
      <div slot="description">提示内容。提示内容。提示内容。提示内容</div>
    </bf-alter>
    <bf-alter type="warning" show-icon>
      <div slot="description">提示内容。提示内容。提示内容。提示内容</div>
    </bf-alter>
    <p>可关闭</p>
    <bf-alter closable>信息提示</bf-alter>
    <bf-alter closable show-icon>信息提示</bf-alter>
    <bf-alter type="info" show-icon closable>
      信息提示
      <div slot="description">提示内容。提示内容。提示内容。提示内容</div>
    </bf-alter>
    <p>自定义关闭内容</p>
    <bf-alter closable>
      信息提示
      <span slot="close">清除</span>
    </bf-alter>
    <p>主题dark</p>
    <bf-alter theme="dark">信息提示</bf-alter>
    <bf-alter type="success" theme="dark">信息提示</bf-alter>
    <bf-alter type="error" theme="dark">信息提示</bf-alter>
    <bf-alter type="warning" theme="dark">信息提示</bf-alter>
    <bf-alter show-icon closable theme="dark">
      信息提示
      <span slot="close">close</span>
    </bf-alter>
    <bf-alter closable show-icon theme="dark">
      信息提示
      <span slot="close">清除</span>
      <div slot="description">提示内容。提示内容。提示内容。提示内容</div>
    </bf-alter>
  </div>
</template>
